<template>
  <el-drawer title="导入货品" :visible.sync="visibility" size="61%">
    <el-form ref="dataForm" label-width="10px" style="width: 100%">
      <el-form-item>
        <upload-excel-component
          :on-success="handleFileLoadSuccess"
          :before-upload="handleBeforeUpload"
        />
      </el-form-item>
      <el-form-item>
        <span v-if="list && list.length > 0">
          记录数: {{ list.length }}条
        </span>
        <el-button :disabled="!list || list.length === 0" @click="handleClear()"
          >清空</el-button
        >
        <el-button @click="handleCloseDialog()">关闭</el-button>
        <el-button
          type="primary"
          :disabled="!list || list.length === 0"
          :loading="loading"
          @click="handleImport()"
          >提交</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-table
          v-if="list"
          :data="list"
          border
          highlight-current-row
          style="
            width: 100%;
            margin-top: 16px;
            overflow: scroll;
            max-height: 450px;
          "
        >
          <el-table-column width="60">
            <template slot-scope="{ row }">
              <el-tooltip
                v-if="row.goodsExistFlag"
                class="item"
                effect="dark"
                content="货品识别码已存在，请先修改文件，重新上传"
                placement="right"
              >
                <i class="el-icon-error danger-color" />
              </el-tooltip>
              <el-tooltip
                v-if="!row.goodsRequireFlag"
                class="item"
                effect="dark"
                content="货品信息缺少必填项，请先修改文件，重新上传"
                placement="right"
              >
                <i class="el-icon-error danger-color" />
              </el-tooltip>
              <el-tooltip
                v-if="!row.goodsCorrectFlag"
                class="item"
                effect="dark"
                content="货品信息不全，请补录完全，例如供应商编号等"
                placement="right"
              >
                <i class="el-icon-warning warning-color" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="分类" prop="category" width="100px" />
          <el-table-column
            label="货品识别码"
            prop="goodsFullCode"
            width="140px"
          />
          <el-table-column label="货号" prop="goodsCode" width="150px" />
          <el-table-column label="货品简称" prop="goodsAbbr" width="150px" />
          <el-table-column
            label="货品名称"
            prop="goodsName"
            min-width="150px"
          />
          <!-- <el-table-column label="别名" prop="goodsAlias" width="100px" /> -->
          <el-table-column label="单位" prop="unit" width="60px" />
          <el-table-column label="供应商编号" width="150px">
            <template slot-scope="{ row }">
              <el-input v-model="row.supplierCode" />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import { getApi } from '@/api/x'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { saveAllGoods, listGoods } from '@/api/base/goods.js'

export default {
  components: { UploadExcelComponent },
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    categoryOptions: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      goodsList: null,
      list: [],
      loading: false
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        this.list = []
      }
    }
  },
  methods: {
    check() {
      const goodsCodeArray = []
      this.goodsList.forEach((goods) => {
        goods.goodsExistFlag = false
        goods.goodsRequireFlag =
          goods.goodsFullCode &&
          goods.goodsCode &&
          goods.goodsAbbr &&
          goods.goodsName &&
          goods.unit
        if (!goods.goodsRequireFlag) {
          goods.goodsRequireFlag = false
        }
        goods.goodsCorrectFlag = goods.supplierCode
        if (!goods.goodsCorrectFlag) {
          goods.goodsCorrectFlag = false
        }
        if (goods.goodsCode) {
          goodsCodeArray.push(goods.goodsCode)
        }
        this.categoryOptions.forEach(c => {
          if (c.value === goods.category) {
            goods.category = c.key
            return // jump loop
          }
        })
      })
      if (goodsCodeArray.length > 0) {
        listGoods({ goodsCodeList: goodsCodeArray }).then((res) => {
          const data = res.data
          if (data) {
            this.goodsList.forEach((goods) => {
              data.forEach((e) => {
                if (goods.goodsFullCode === e.goodsFullCode) {
                  goods.goodsExistFlag = true
                  return // jump loop
                }
              })
            })
          }
        }).finally(() => {
          this.list = this.goodsList
        })
      }
    },
    handleBeforeUpload(file) {
      const FILE_SIZE = 10
      const isLessThan = file.size / 1024 / 1024 <= FILE_SIZE
      if (isLessThan) {
        return true
      }
      this.$message({
        message: '文件大于' + FILE_SIZE + 'M',
        type: 'warning'
      })
      return false
    },
    handleFileLoadSuccess({ results, header }) {
      try {
        const api = getApi()
        api.setGoodsList(results)
        this.goodsList = api.getGoodsList()
        this.check()
      } catch (e) {
        this.$message.warning('您导入的表格数据格式错误，请调整后导入: ' + e.message)
        // console.error(e)
        return
      }
    },
    handleClear() {
      this.list = []
    },
    handleCloseDialog() {
      this.visibility = false
    },
    handleImport() {
      this.loading = true
      saveAllGoods(this.goodsList)
        .then(() => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.visibility = false
          this.$emit('importData', {})
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
